<template>
  <div class="fun-list">
    <el-table
        class="yt-table"
        :data="lists"
        border
        max-height="300px"
        style="width: 100%">
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="functionName" label="函数名">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name"
                    placeholder="请填写函数名称"
                    clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="paramInputClass" label="入参类型">
        <template slot-scope="scope">
          <el-input
              v-model="scope.row.putParams"
              readonly
              placeholder="请选择入参类型"
              @click.native="putParamsTap(scope.row,scope.$index)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="paramOutputClass" label="出参类型">
        <template slot-scope="scope">
          <el-input
              v-model="scope.row.outParams"
              readonly
              placeholder="请选择出参类型"
              @click.native="outParamsTap(scope.row,scope.$index)"></el-input>
        </template>
      </el-table-column>
      <el-table-column
          prop="remarks"
          label="备注">
        <template slot-scope="scope">
          <el-input
              v-model="scope.row.remarks"
              placeholder="请填写函数备注"
              clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              v-if="scope.$index === lists.length-1"
              type="success"
              icon="el-icon-circle-plus-outline"
              @click="addTableRow">
          </el-button>
          <el-button
              v-if="lists.length>1"
              type="danger"
              icon="el-icon-remove-outline"
              @click="delTableRow(scope.row,scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <ParamDialog ref="paramDialog" @selected="selected"></ParamDialog>
    <OutParamDialog ref="outParamDialog" @selected="selectedOut"></OutParamDialog>

  </div>
</template>

<script>
import ParamDialog from './ParamDialog'
import OutParamDialog from './OutParamDialog'

export default {
  name: "RegisterFunList",
  components: {ParamDialog, OutParamDialog},
  props: {
    datas: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      lists: [
        {name: '', putParams: '', outParams: '', putParamsObj: [], outParamsObj: [], remarks: ''}
      ]
    }
  },
  watch: {
    datas(val) {
      this.lists = val
    }
  },
  methods: {
    addTableRow() {
      this.lists.push({name: '', putParams: '', outParams: '', putParamsObj: [], outParamsObj: [], remarks: ''})
    },
    delTableRow(item, index) {
      this.lists.splice(index, 1)
    },
    // 选择入参
    putParamsTap(item, index) {
      this.$refs.paramDialog.show({item, index}, 1)
    },
    outParamsTap(item, index) {
      this.$refs.outParamDialog.show({item, index})
    },
    // 选中回调
    selected(datas, index) {
      let structureDatas = []
      this.lists[index].putParams = datas.map(item => {
        structureDatas.push(item.list&&item.list.map(li => {
          return {
            ...li,
            strName: item.value
          }
        }))
        return `${item.name} ${item.value}`
      }).join(',')

      this.lists[index].putParamsObj = datas
      this.lists[index].pStructureList = structureDatas
    },
    // 出参选中回调
    selectedOut(datas, index) {
      let structureDatas = []
      this.lists[index].outParams = datas.map(item => {
        structureDatas.push(item.list&&item.list.map(li => {
          return {
            ...li,
            strName: item.value
          }
        }))
        return item.value ? `${item.name} ${item.value}` : `${item.name}`
      }).join(',')
      this.lists[index].outParamsObj = datas
      this.lists[index].outStructureList = structureDatas

    }
  }
}
</script>

<style scoped>

</style>